<template>
  <div
    :style="{
      background:
        store.userStore.layoutMode === 'topmenu'
          ? store.userStore.aside === 'dark'
            ? '#222222'
            : '#fff'
          : token.colorBgBase,
      color:
        store.userStore.layoutMode === 'topmenu'
          ? store.userStore.aside === 'light'
            ? '#001529'
            : '#fff'
          : token.colorTextBase
    }"
  >
    <div class="rightcontent" style="margin-right: 12px">
      <a-space>
        <span>{{ store.userApp.userInfo.realName }}</span>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="menuClick">
              <a-menu-item key="1">
                <template #icon>
                  <SettingOutlined />
                </template>
                <span>系统设置</span>
              </a-menu-item>
              <a-menu-item key="2">
                <template #icon>
                  <LogoutOutlined />
                </template>
                <span>返回门户</span>
              </a-menu-item>
            </a-menu>
          </template>
          <a-avatar shape="square" size="small">
            <template #icon>
              <UserOutlined />
            </template>
            {{ currentUser.nickname }}
          </a-avatar>
        </a-dropdown>
      </a-space>
      <div class="left" v-if="store.userStore.layoutMode !== 'topmenu'">
        <div class="menu" v-if="!store.userStore.fixSiderbar">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="collapsedChange(collapsed)"
          />
          <menu-fold-outlined v-else class="trigger" @click="collapsedChange(collapsed)" />
        </div>
        <div class="title">专病运营管理中心</div>
      </div>
    </div>
    <setting-drawer v-model:open="open"/>
  </div>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  BgColorsOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue'
import type { MenuProps } from 'ant-design-vue'
import { ref } from 'vue'
import store from '@/store'
import SettingDrawer from '@/components/SettingDrawer/index.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import { theme } from 'ant-design-vue'
const { useToken } = theme
const { token } = useToken()

defineProps(['collapsed', 'currentUser'])
const emit = defineEmits(['update:collapsed'])

const collapsedChange = (collapsed) => {
  console.log(collapsed)
  emit('update:collapsed', !collapsed)
}

export type CurrentUser = {
  nickname: string
  avatar?: string
}

const open = ref(false)

const menuClick: MenuProps['onClick'] = (e) => {
  const { key } = e
  if (key === '1') {
    // 主题设置
    open.value = true
  } else if (key === '2') {
    // 退出登录
    store.userStore.LoginOut()
    router.push({
      name: 'Login'
    })
  }
}
</script>

<style lang="less" scoped>
.rightcontent {
  // flex: 0 0 auto;
  // display: flex;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  line-height: 48px;
  padding-left: 12px;
}
.left {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 8px;
}
.menu {
  height: 48px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.title {
  font-size: 16px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 600;
  // color: #000000;
  line-height: 48px;
  height: 48px;
}
</style>
